<script>
export default {
  name: "IndexView"
}
</script>

<template>
  <el-container style="height: 100vh;">
  <!-- 侧边栏 -->
  <el-aside width="200px" style="background-color: #304156;">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
    >
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-document"></i>
        <router-link to="/student" style="color: lightgray;text-decoration: none" >学生管理</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <router-link to="/student" style="color: lightgray;text-decoration: none" >老师管理</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-notebook-2"></i>
        <router-link to="/course" style="color: lightgray;text-decoration: none">课程管理</router-link>
      </el-menu-item>
    </el-menu>
  </el-aside>

  <el-container>
    <!-- 顶部导航栏 -->
    <el-header style="background-color: #ffffff; border-bottom: 1px solid #e6e6e6;">
      <el-row align="middle" type="flex" justify="space-between">
        <el-col>
          <span style="font-size: 20px; font-weight: bold;">学校后台管理系统</span>
        </el-col>
        <el-col>
          <el-dropdown>
              <span class="el-dropdown-link">
                Admin<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
  </el-container>
</template>

<styles>
.el-header {
padding: 0 20px;
line-height: 60px;
}

.el-aside {
color: #333;
}

.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}

.el-dropdown-link i {
margin-left: 5px;
}
</styles>